<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="query">
				<el-form-item>
					<el-input v-model="query.keyword" placeholder="关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="search">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="pageInfo.rows" highlight-current-row v-loading="listLoading" style="width: 100%;">
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="name" label="名称" width="180" sortable>
			</el-table-column>
			<el-table-column prop="url" label="url" width="180" sortable>
			</el-table-column>
			<el-table-column prop="sn" label="标识" width="240" sortable>
			</el-table-column>
			<el-table-column prop="parent.name" label="父权限" width="180" sortable>
			</el-table-column>
			<el-table-column prop="descs" label="描述" sortable>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
      <el-pagination
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]"
          :page-size="query.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"
          :current-page="query.currentPage"
          style="float: right">
      </el-pagination>
		</el-col>
	</section>
</template>

<script>

	export default {
		data() {
			return {
        pageInfo:{
          rows: [],
          total: 0
        },
				listLoading: false,
        query:{
				  currentPage:1,
          pageSize:10,
          keyword:""
        }
			}
		},
		methods: {
      search(){
        // 把query.currengPage设置为1,当进行搜索时,应该从第一页开始重新进行搜索
        this.query.currentPage = 1;
        this.getPermissions();
      },
      handleSizeChange(val){
        // val 每页显示条数选中的值
        this.query.pageSize = val;
        // 当每页显示条数的值发生改变时,应该重新从第一页开始进行查询
        this.query.currentPage = 1;
        // 调用分页查询方法
        this.getPermissions();
      },
			handleCurrentChange(val) {
			  // val就是当前要跳转的那个页码
        console.log(val)
        // 将val值赋给query中的当前页
				this.query.currentPage = val;
        // 调用分页查询方法
				this.getPermissions();
			},
			//获取权限分页列表
      getPermissions() {
        this.$http.post("/permission",this.query)
            .then(result => {
              console.log(result)
              result = result.data; // 后端返回的结果是封装在result.data属性中的 result.data:{success:true,message:"",resultObj:{}}
              if(result.success){
                // 给表格赋值
                this.pageInfo = result.resultObj;
              }else{
                this.$message({message: '分页查询失败!'+result.message, type: 'error'});
              }
            })
            .catch(result => {
              console.log(result)
            })
			}
		},
		mounted() {
		  // 调用权限的分页接口
			this.getPermissions();
		}
	}

</script>

<style scoped>

</style>